<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>商品详细</title>
		<link rel="stylesheet" th:href="@{/css/mui.min.css}" />
		<link rel="stylesheet" type="text/css" th:href="@{/css/aui.2.0.css}" />
		<link rel="stylesheet" type="text/css" th:href="@{/css/aui-slide.css}" />
		<link rel="stylesheet" type="text/css" th:href="@{/css/style.css}" />
		<style>
			.cj-price-calenar {
				width: 100%;
				margin: 0 auto;
				background: #fff;
			}
			
			.cj-price-calenar-box {
				font-size: 13px;
				width: 14%;
				height: 50px;
				display: inline-block;
				line-height: 25px;
				text-align: center;
			}
			
			.cj-price-calenar-box .price {
				font-size: 13px;
			}
			
			.cj-price-calenar-week {
				color: #999;
				width: 14%;
				height: 30px;
				display: inline-block;
				line-height: 30px;
				text-align: center;
			}
			
			.cj-price-calenar-title {
				font-size: 13px;
				text-align: center;
				height: 30px;
				line-height: 30px;
				background: rgb(239, 241, 245);
			}
			
			.cj-price-calenar-select-month {
				color: #03a9f4;
				font-size: 13px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">登录</h1>
		</header>
		<div class="line-margin-40"></div>
		<!-- 轮播展示 start-->
		<div id="image-carousel">
			<div class="aui-slide-wrap">
				<div class="aui-slide-node bg-dark">
					<img src="/img/goods-1.jpg" />
				</div>
				<div class="aui-slide-node bg-dark">
					<img src="/img/goods-2.jpg" />
				</div>
				<div class="aui-slide-node bg-dark">
					<img src="/img/goods-3.jpg" />
				</div>
			</div>
			<div class="aui-slide-page-wrap">
				<!--分页容器-->
			</div>
			<div class=" images-content images-right">
				&nbsp;&nbsp;￥9999&nbsp;&nbsp;
			</div>
		</div>
		<!-- 轮播展示 end-->

		<!---商品标题 start-->
		<div class="aui-content  bg-white">
			<div class="goods-title">
				惠州十里银滩·棕榈滩11号别墅
				<div class="goods-small-title">
					4房 | 6床 | 宜居12人
				</div>
				<div class="goods-label">
					<div class="aui-label aui-label-info">毗邻景区</div>
					<div class="aui-label aui-label-info">私人花园</div>
					<div class="aui-label aui-label-info">海景度假</div>
					<div class="aui-label aui-label-info">豪华装修</div>
				</div>
			</div>
			<div class="goods-adress">
				<div class="aui-pull-left">
					地址：惠州市惠东县碧桂园十里银滩棕榈滩三区
				</div>
				<div class="aui-pull-right address-icon">
					<i class="aui-iconfont aui-icon-location aui-text-primary aui-font-size-20"></i>
				</div>
			</div>
		</div>
		<div class="line-margin"></div>

		<div class="aui-content">
			<div class="aui-tab" id="tab">
				<div class="aui-tab-item aui-active">场地详情</div>
				<div class="aui-tab-item">预定价格</div>
			</div>
			<div class="goods-des" id="contentBox" style="display:block;">
				<!--别墅介绍 start-->
				<div class="m-pdetail-item  bg-white">
					<div class="f-table f-fullwidth">
						<div class="f-table-cell">
							<hr>&nbsp;
						</div>
						<div class="f-table-cell m-title">
							别墅介绍
						</div>
						<div class="f-table-cell">
							<hr>&nbsp;
						</div>
					</div>
					<p>
						别墅位于具有“东方夏威夷” 之称的碧桂园，处于南海大亚湾的东部，别墅采用欧式风格装修设计，搭配自然温馨的暖色灯光，处处流露尊贵典雅气息，同时又散发着旖旎自然的温馨，给你度假好心情！
					</p>
					<p>
						别墅屋面积约为215平方米，花园80平方，4室1厅6床5卫2阳台，环境唯美舒适，WiFi全楼覆盖。别墅内配有自动麻将、厨房餐具、24小时热水供应，可容纳12人娱乐食宿。
					</p>
					<p>
						<img style="width:100%;height:100%;" src="/img/introduce-1.jpg" />
					</p>
					<div class="content-more" style="display:none;">
						<img style="width:100%;height:100%;" src="/img/introduce-2.jpg" />
						<img style="width:100%;height:100%;" src="/img/introduce-3.jpg" />
					</div>
					<div class="aui-text-center">
						<p>
							<div onclick="click_more(0,this)" class="aui-btn aui-btn-info aui-btn-outlined aui-btn-sm btn-more">更多</div>
						</p>
					</div>
				</div>
				<!--别墅介绍 end-->
				<!--配套设施 satrt-->
				<div class="line-margin"></div>
				<div class="m-pdetail-item  bg-white">
					<div class="f-table f-fullwidth">
						<div class="f-table-cell">
							<hr>&nbsp;
						</div>
						<div class="f-table-cell m-title">
							配套设施
						</div>
						<div class="f-table-cell">
							<hr>&nbsp;
						</div>
					</div>
					<section class="aui-grid">
						<div class="aui-row">
							<div class="aui-col-xs-2">
								<img class="aui-iconfont goods-iconfont-size" src="/img/icon-bathroom.png" />
							</div>
							<div class="aui-col-xs-2">
								<img class="aui-iconfont goods-iconfont-size" src="/img/icon-kitchen.png" />
							</div>
							<div class="aui-col-xs-2">
								<img class="aui-iconfont goods-iconfont-size" src="/img/icon-air.png" />
							</div>
							<div class="aui-col-xs-2">
								<img class="aui-iconfont goods-iconfont-size" src="/img/icon-wash.png" />
							</div>
							<div class="aui-col-xs-2">
								<img class="aui-iconfont goods-iconfont-size" src="/img/icon-wifi.png" />
							</div>
							<div class="aui-col-xs-2">
								<img class="aui-iconfont goods-iconfont-size" src="/img/icon-tv.png" />
							</div>
							<div class="aui-col-xs-2">
								<img class="aui-iconfont goods-iconfont-size" src="/img/icon-mahjong.png" />
							</div>
							<div class="aui-col-xs-2">
								<img class="aui-iconfont goods-iconfont-size" src="/img/icon-shoe.png" />
							</div>
							<div class="aui-col-xs-2">
								<img class="aui-iconfont goods-iconfont-size" src="/img/icon-stop.png" />
							</div>
							<div class="aui-col-xs-2">
								<img class="aui-iconfont goods-iconfont-size" src="/img/icon-air.png" />
							</div>
							<div class="aui-col-xs-2">
								<img class="aui-iconfont goods-iconfont-size" src="/img/icon-elect.png" />
							</div>
							<div class="aui-col-xs-2">
								<img class="aui-iconfont goods-iconfont-size" src="/img/icon-electric.png" />
							</div>
						</div>
						<div class="aui-row content-more" style="display:none;">
							<div class="aui-col-xs-2">
								<img class="aui-iconfont goods-iconfont-size" src="/img/icon-pot.png" />
							</div>
							<div class="aui-col-xs-2">
								<img class="aui-iconfont goods-iconfont-size" src="/img/icon-kettle.png" />
							</div>
							<div class="aui-col-xs-2">
								<img class="aui-iconfont goods-iconfont-size" src="/img/icon-hair.png" />
							</div>
						</div>
					</section>

					<div class="aui-text-center">
						<p>
							<div onclick="click_more(1,this)" class="aui-btn aui-btn-info aui-btn-outlined aui-btn-sm btn-more">更多</div>
						</p>
					</div>
				</div>
				<!--配套设施 end-->
				<!--补充介绍 start-->
				<div class="line-margin"></div>
				<div class="m-pdetail-item  bg-white">
					<div class="f-table f-fullwidth">
						<div class="f-table-cell">
							<hr>&nbsp;
						</div>
						<div class="f-table-cell m-title">
							补充介绍
						</div>
						<div class="f-table-cell">
							<hr>&nbsp;
						</div>
					</div>
					<p>二楼：1.8米大床房1间，1.5米双床房1间</p>
					<p>三楼：1.8米大床房1间，1.5米双床房1间</p>
					<div class="content-more" style="display:none;">

					</div>
					<br/>
					<div class="aui-text-center">
						<p>
							<div onclick="click_more(2,this)" class="aui-btn aui-btn-info aui-btn-outlined aui-btn-sm btn-more">更多</div>
						</p>
					</div>
				</div>
				<!--补充介绍 end-->
				<!--温馨提示 start-->
				<div class="line-margin"></div>
				<div class="m-pdetail-item  bg-white">
					<div class="f-table f-fullwidth">
						<div class="f-table-cell">
							<hr>&nbsp;
						</div>
						<div class="f-table-cell m-title">
							温馨提示
						</div>
						<div class="f-table-cell">
							<hr>&nbsp;
						</div>
					</div>
					<p>1. 所有入住客人姓名+身份证号码+车牌号码需提前一工作日报备，以便办理入住；入住押金为1000元/栋；适宜居住人数12-14人，不可以超人；别墅免费提供一次性洗簌用品，禁止烧烤</p>
					<div class="content-more" style="display:none;">
						<p>2. 到达别墅前半小时通知店长前来接待办理入住；退房前请将使用过物品恢复原位后联系店长查房，办理退房手续</p>
						<p>3. 入住请爱护别墅卫生及物品，如有物品损坏丢失，需照价赔偿；如有呕吐物以及地毯极脏，加收100元清洁费</p>
						<p>4. 别墅提供两个免费停车位，其余停到停车场20元/天</p>
					</div>
					<br/>
					<div class="aui-text-center">
						<p>
							<div onclick="click_more(3,this)" class="aui-btn aui-btn-info aui-btn-outlined aui-btn-sm btn-more">更多</div>
						</p>
					</div>
				</div>
				<!--温馨提示 end-->
				<!--用户评价 start-->
				<div class="line-margin"></div>
				<div class="m-pdetail-item  bg-white">
					<div class="f-table f-fullwidth">
						<div class="f-table-cell">
							<hr>&nbsp;
						</div>
						<div class="f-table-cell m-title">
							用户评价
						</div>
						<div class="f-table-cell">
							<hr>&nbsp;
						</div>
					</div>
					<div class="goods-commit">
						<p>暂无评论，客官不来一发吗</p>
					</div>
				</div>
				<!--用户评价 end-->
				<!--猜你喜欢 start-->
				<div class="line-margin"></div>
				<div class="m-pdetail-item  bg-white">
					<div class="f-table f-fullwidth">
						<div class="f-table-cell">
							<hr>&nbsp;
						</div>
						<div class="f-table-cell m-title">
							猜你喜欢
						</div>
						<div class="f-table-cell">
							<hr>&nbsp;
						</div>
					</div>
					<ul class="aui-list aui-media-list goods-like">
						<li class="aui-list-item">
							<div class="aui-media-list-item-inner">
								<div class="aui-list-item-media">
									<img src="/img/list-1.jpg">
								</div>
								<div class="aui-list-item-inner">
									<div class="aui-list-item-text">
										<div class="aui-list-item-title">惠州十里银滩·浅水湾1号别墅</div>
									</div>
									<div class="aui-list-item-text">
										4房4床-397平方米-宜居8人
									</div>
									<div class="aui-list-item-text price">
										￥9999
									</div>
								</div>
							</div>
						</li>
						<li class="aui-list-item">
							<div class="aui-media-list-item-inner">
								<div class="aui-list-item-media">
									<img src="/img/list-2.png">
								</div>
								<div class="aui-list-item-inner">
									<div class="aui-list-item-text">
										<div class="aui-list-item-title"> 惠州十里银滩·浅水湾4号别墅</div>
									</div>
									<div class="aui-list-item-text">
										4房4床-397平方米-宜居8人
									</div>
									<div class="aui-list-item-text price">
										￥6688
									</div>
								</div>
							</div>
						</li>
						<li class="aui-list-item">
							<div class="aui-media-list-item-inner">
								<div class="aui-list-item-media">
									<img src="/img/list-3.jpg">
								</div>
								<div class="aui-list-item-inner">
									<div class="aui-list-item-text">
										<div class="aui-list-item-title">惠州十里银滩·棕榈滩6号别墅</div>
									</div>
									<div class="aui-list-item-text">
										4房4床-397平方米-宜居8人
									</div>
									<div class="aui-list-item-text price">
										￥6666
									</div>
								</div>
							</div>
						</li>
					</ul>
				</div>
				<!--猜你喜欢 end-->
			</div>

		</div>
		<div class="aui-content" id="priceCalenarBox" style="display:none;">
			<div class="cj-price-calenar" id="priceCalenar">
			</div>
		</div>
		<br/><br/><br/>

		<footer class="aui-bar aui-bar-tab" id="footer">
			<div class="aui-bar-tab-item" tapmode>
				<i class="aui-iconfont aui-icon-star"></i>
				<div class="aui-bar-tab-label">收藏</div>
			</div>
			<div class="aui-bar-tab-item" tapmode onclick="location.href='pay.html'">
				<div class="aui-btn aui-btn-block aui-btn-info">加入清单</div>
			</div>
		</footer>

		<!---商品标题 end---->
		<script type="text/javascript" language="javascript" src="/js/jquery.min.js"></script>
		<script type="text/javascript" src="/js/api.js"></script>
		<script type="text/javascript" src="/js/aui-slide.js"></script>
		<script type="text/javascript" src="/js/aui-scroll.js"></script>
		<script type="text/javascript" src="/js/PriceCalenar.js"></script>
		<script>
			//轮播展示
			var imageCarousel = $("#image-carousel");
			var imageCarouselWidth = imageCarousel.width();
			var imageCarouselHeight = imageCarouselWidth * 0.66;
			//console.log(imageCarouselWidth);
			var imageCarousel = new auiSlide({
				container: document.getElementById("image-carousel"),
				// "width":300,
				"height": imageCarouselHeight,
				"speed": 500,
				"autoPlay": 3000,
				"loop": true,
				"pageShow": true,
				"pageStyle": 'dot',
				'dotPosition': 'center'
			});
			$(".text-carousel").slideUp();

			function click_more(index, btn) {
				btn = $(btn);
				$(".content-more").eq(index).toggle("slow", function() {
					var text = btn.text();
					if(text == "更多") {
						btn.text("收起");
					} else {
						btn.text("更多");
					}
				});
			}

			$(".aui-tab-item").click(function() {
				$("#contentBox").toggle();
				$("#priceCalenarBox").toggle();
			});

			var calendar = new PriceCalenar(2017, 6);
			calendar.show();
		</script>
	</body>

</html>